<template>
  <div class="top" @click="goDetailPage(item.id)">
    <div class="left">
      <img src="../../../assets/avatar-doctor.svg" alt="" />
      <p>{{ item.docInfo?.name }}</p>
    </div>
    <p :class="{ style: item.status === 1, green: item.status === 3 }">
      {{ btnOptions.find((o) => o.val === item.status)?.name }}
    </p>
  </div>
  <div class="desc">
    <p>
      <span>病情描述</span>
      <span>{{ item.illnessDesc }}</span>
    </p>
    <p>
      <span>价格</span>
      <span>{{ item.payment }}</span>
    </p>
    <p>
      <span>创建时间</span>
      <span>{{ item.createTime }}</span>
    </p>
  </div>
  <div class="btn" v-if="item.status === OrderType.ConsultPay">
    <van-button
      type="primary"
      round
      :loading="loading1"
      size="small"
      @click="cancelConsultOrder(item)"
      >取消问诊</van-button
    >
    <van-button type="primary" round size="small" @click="goDetailPage(item.id)"
      >去支付</van-button
    >
  </div>
  <div class="btn" v-if="item.status === OrderType.ConsultWait">
    <van-button
      type="primary"
      round
      :loading="loading1"
      size="small"
      @click="cancelConsultOrder(item)"
      >取消问诊</van-button
    >
    <van-button
      type="primary"
      round
      size="small"
      @click="router.push('/room?orderId=' + item.id)"
      >继续沟通</van-button
    >
  </div>
  <div class="btn" v-if="item.status === OrderType.ConsultChat">
    <van-button
      type="primary"
      round
      v-if="item.prescriptionId"
      size="small"
      @click="getPrescription(item.prescriptionId as string)"
      >查看处方</van-button
    >
    <van-button
      type="primary"
      round
      size="small"
      @click="router.push('/room?orderId=' + item.id)"
      >继续沟通</van-button
    >
  </div>
  <div class="btn over" v-if="item.status === OrderType.ConsultComplete">
    <div class="left">
      <p @click="showPopover = true">更多</p>
      <van-popover
        placement="top"
        v-model:show="showPopover"
        :actions="actions"
        @select="onSelect"
      />
    </div>
    <div class="right">
      <van-button type="primary" round size="small" @click="router.push('/room?orderId=' + item.id)">问诊记录</van-button>
      <van-button type="primary" round size="small">去评价</van-button>
    </div>
  </div>
  <div class="btn" v-if="item.status === OrderType.ConsultCancel">
    <van-button
      :loading="loading2"
      type="primary"
      round
      size="small"
      @click="deleteConsultOrder(item)"
      >删除订单</van-button
    >
    <van-button type="primary" round size="small" @click="router.push('/')"
      >咨询其他医生</van-button
    >
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { OrderType } from "@/enums";
import { showImagePreview, showToast } from "vant";
import router from "@/router";
import { useOrderCanCel, useDeleteOrder } from "@/hooks/cosult";
import {
  deleteOrderApi,
  getPatientConsultPrescription,
} from "@/services/consult";
import type { ConsultOrderItem } from "@/types/consult";
const emit = defineEmits(["on-delete"]);
const { loading1, cancelConsultOrder } = useOrderCanCel();
const { loading2, deleteConsultOrder } = useDeleteOrder(() => {
  emit("on-delete", props.item.id);
});
const props = defineProps<{
  item: ConsultOrderItem;
}>();

const showPopover = ref(false);

// 通过 actions 属性来定义菜单选项
const actions = [{ text: "查看处方" }, { text: "删除订单" }];
const onSelect = (action: any) => {
  console.log(action);

  if (action.text === "查看处方") {
    getPrescription(props.item.prescriptionId as string);
  }
  if (action.text === "删除订单") {
    deleteConsultOrder(props.item);
  }
};
const btnOptions = [
  { name: "待支付", val: 1 },
  { name: "待接诊", val: 2 },
  { name: "咨询中", val: 3 },
  { name: "已完成", val: 4 },
  { name: "已取消", val: 5 },
];

// 去详情页
function goDetailPage(id: string) {
  router.push("/user/cosultDetail/" + id);
}

// 查看处方单
async function getPrescription(id: string) {
  const res = await getPatientConsultPrescription(id);
  showImagePreview([res.data.url]);
}
</script>

<style lang="scss" scoped>
.over {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
    > p {
      color: var(--cp-text3);
    }
  }
}
.van-list {
  height: calc(100vh - 92px);
  overflow-y: scroll;
  background-color: #f6f7f9;
  padding: 10px;
}
.consult-list-item {
  margin: 10px 0;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  .top {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--cp-line);
    .style {
      color: orange;
    }
    .green {
      color: var(--cp-primary);
    }
    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
    .left {
      display: flex;
      align-items: center;
    }
    > p {
      color: var(--cp-text3);
    }
  }
  .desc {
    p {
      margin: 8px 0;
      display: flex;
      align-items: center;
      span:nth-child(1) {
        display: block;
        width: 70px;
        text-align: left;
        color: var(--cp-dark);
      }
    }
    p:last-child {
      span:last-child {
        color: var(--cp-dark);
      }
    }
  }
  .btn {
    text-align: right;
    .van-button:nth-child(1) {
      background-color: var(--cp-bg);
      color: var(--cp-text3);
      border: 0;
      margin-right: 10px;
    }
    .van-button:nth-child(2) {
      background-color: transparent;
      color: var(--cp-primary);
    }
  }
}
</style>
